<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的影像</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="../static/css/base.css">

</head>

<body>
    <div id="app">

        <div class="row" align="center">
            <div class="col-xs-12 nav_container" >
                <div class="col-xs-1" @click="back_goLogin"><img src="../static/img/back_black.png" style="width: 2.5rem;width: 2.5rem;margin-top: 0.8rem;margin-left: -1.5rem"></div>
                <div class="col-xs-9">
                    <div style="color: black;height:2.5rem;margin-top: 1rem;text-align: center;padding-top: 0rem;font-size: 2rem">我的影像</div>
                </div>
                <div class="col-xs-1" @click="addReport"><img src="../static/img/add_black.png" style="width: 2.6rem;width: 2.6rem;margin-top: 0.8rem;"></div>
            </div>
        </div>

        <div class="row" v-for="report in reports" @click="goView(report)">
            <div class="feature" style="margin-top: 1rem;margin-left: 6%;width: 88%;box-shadow:0 0 2px 2px grey;">
                <div class="product-container">
                    <div class="name" v-text="'检查号:'+ report.pid"></div>
                    <div class="strong" v-text="'姓名:'+ report.name"></div>
                    <code v-text="formatInfo(report)" class="strong"></code>
                    <div class="strong" v-text="'医院:' + report.hospital"></div>
                    <div class="strong"v-text="'时间:' + report.check_date"></div>
                    <div class="space"></div>
                </div>
            </div>
        </div>


        <div v-if="reports.length == 0" style="margin-top: 15rem;font-size: 3rem;text-align: center">
            <p style="margin-left: 2rem;margin-right: 2rem">未能通过身份证/手机号查询到影像结果，请手动添加影像号/病历号</p>
            <button @click="addReport" class="round" style="margin-top: 17rem;width: 80%;font-size: 2rem;">添加新的影像检查</button>
        </div>



        <div class="main_nav_bottom" v-else>
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container" align="center" style="background: #eee">
                    <style>
                        .nav-tabs
                        {
                            text-align: center;
                            height: 2rem;
                            line-height: 2rem;
                        }
                    </style>
                    <ul class="nav nav-tabs nav-tabs-justified">
                        <div class="row" align="center">
                            <div class="col-xs-12 nav_container" >
                                <div class="col-xs-1" @click="back_goLogin"><img src="../static/img/back_black.png" style="width: 2.5rem;width: 2.5rem;margin-top: 0.8rem;margin-left: -1.5rem"></div>
                                <div class="col-xs-9">
                                    <div style="color: black;height:2.5rem;margin-top: 1rem;text-align: center;padding-top: 0rem;font-size: 2rem">我的影像</div>
                                </div>
                                <div class="col-xs-1" @click="addReport"><img src="../static/img/add_black.png" style="width: 2.6rem;width: 2.6rem;margin-top: 0.8rem;"></div>
                            </div>
                        </div>
                    </ul>
                </div>
            </nav>

            <nav class="navbar navbar-default navbar-fixed-bottom">
                <div class="container" align="center" style="background: #eee">
                    <style>
                        .nav-tabs
                        {
                            text-align: center;
                            height: 2rem;
                            line-height: 2rem;
                        }
                    </style>
                    <ul class="nav nav-tabs nav-tabs-justified">
                        <div class="row" align="center" @click="addReport">
                            <div class="col-md-12 col-sm-12 col-xs-12" align="center"><img src="../static/img/add_black.png" style="height: 25px;width: 25px;margin-bottom: 15px;margin-top: 10px"></div>
                        </div>
                    </ul>
                </div>
            </nav>
        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js " integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa " crossorigin="anonymous "></script>
    <script src="../static/js/base/vue.min.js"></script>
    <script src="../static/js/base/util.js"></script>
    <script src="../static/js/base/url.js"></script>
    <script src="../static/js/base/base_net.js"></script>
    <script src="../static/js/report_list.js"></script>


</body>
<style scoped>
  body {
       background: #eee;
  }
  .round {
      background: #337ab7;
      border: 1px solid #337ab7;
      color: white;
      -moz-border-radius: 5px;
      /* Gecko browsers */
      -webkit-border-radius: 5px;
      /* Webkit browsers */
      border-radius:5px;
      /* W3C syntax */
  }
   .product-container {
       width: 100%;
       margin: 0 auto;
       border-radius: 5px;
       background: white;
   }
  .name {
      border-bottom: 1px solid gray;
      font-size: 1.8rem;
      padding: 0.3rem;
  }
  .interest {
      color: black;
      font-size: 20px;
      font-weight: bold;
      padding: 0px;
  }
  .percent {
      font-size: 1rem;
  }
  .intro {
      padding: 5px;
  }
  .strong {
      padding: 3px;
      font-size: 1.2rem;
      color: black;
      background: white;
      border-radius: 0 0 1px 1px;
  }
  .space {
      border-top: 1px solid gray;
      background: white;
      height: 2.2rem;
  }
  .nav_top_space {
        height: 3.8rem;
        background: #eee;
  }
</style>
</html>